<template>
    <div class="nav">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item, index) in navList.length / 5" :key="item">
                <van-grid :column-num="5">
                    <van-grid-item :icon="item.imgurl" :text="item.title"
                        v-for="item in navList.slice(index * 5, (index + 1) * 5)" :key="item.id" />
                </van-grid>
            </van-swipe-item>
            <template #indicator="{ active, total }">
                <!-- <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div> -->
                <div class="custom-indicator">
                    <div v-for="(item1,i) in total" :class="active==i?'active':''"> </div>
                </div>
            </template>
        </van-swipe>
    </div>
</template>

<script>
export default {
    props: {
        navList: {
            type: Array,
            required: true
        }
    }
}
</script>

<style scoped lang="less"> 
.nav {
    position: relative;
    .custom-indicator {
        position: absolute;
        right: 0px;
        left: 0px;
        bottom: 5px;
        font-size: 12px;
        width: 40px;
        background: rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: space-between;
        &>div{
            width: 50%;
            height: 10px;
        }
        .active{
        background-color: red;
    }
    }
    
}
</style>